<template>
  <navigator :url="url" style="width: 100%; height: 100%">
    <view class="item">
      <u-icon
        :customStyle="{ paddingTop: 20 + 'rpx' }"
        :name="name"
        :size="28"
      ></u-icon>
      <text class="grid-text">{{ title }}</text>
    </view>
  </navigator>
</template>
<script>
export default {
  name: "GridItem",
  props: {
    name: {
      type: String,
      required: true,
      default: "",
    },
    title: {
      type: String,
      required: true,
      default: "",
    },
    url: {
      type: String,
      required: true,
      default: "",
    },
  },
};
</script>
<style lang="scss">
.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  .grid-text {
    font-size: 14px;
    color: #909399;
    padding: 10rpx 0 20rpx 0rpx;
    /* #ifndef APP-PLUS */
    box-sizing: border-box;
    /* #endif */
  }
}
</style>